.g__btn {
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid rgb(191, 203, 217);
  margin: 0px;
  border-radius: 4px;
  padding: 12px 20px;
  position: relative;
  color: rgb(31, 45, 61);
  font-size: $font-size-base;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.g__btn--default {
  @include border-radius;
  transition: all 0.2s linear;

  &:hover,
  &:active {
    text-decoration: "none";
    opacity: 0.5;
  }
  
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(221,221,221, .5);
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &.is-long {
    @include size(100%, auto);
  }

  &.is-round {
    @include border-radius(20px);
  }

  &.is-plain {
    color: $btn-plain-color;
    background: $btn-plain-bg;
    border: $border-width-default $border-style-default $border-color-base;
  }

  &.no-radius {
    @include border-radius(0px);
  }
}

.g__btn--primary {
  @extend .g__btn--default;
  color: $btn-primary-color;
  background: $btn-primary-bg;
  border: $border-width-default $border-style-default $btn-primary-bg;

  // transition: all 0.2s linear;
  &:hover,
  &:active {
    background-color: $btn-primary-bg;
    text-decoration: none;
    color: $plain-color;
    border-color: $btn-primary-bg;
  }

  &:focus {
  box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, .5);
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &.is-round {
    @include border-radius(20px);
  }

  &.is-plain {
    color: $btn-plain-color;
    background: $btn-plain-bg;
    border: $border-width-default $border-style-default $border-color-base;

    &:hover,
    &:active {
      background-color: $btn-primary-bg;
      text-decoration: none;
      color: $plain-color;
      border-color: $btn-primary-bg;
      opacity: 0.5;
    }
  }

  &.is-long {
    @include size(100%, auto);
  }

  &.no-radius {
    @include border-radius(0);
  }
}

.g__btn--success {
  @extend .g__btn--default;
  color: $btn-success-color;
  background: $btn-success-bg;
  border: $border-width-default $border-style-default $btn-success-bg;

  &:hover,
  &:active {
    background-color: $btn-success-bg;
    text-decoration: none;
    color: $plain-color;
    border-color: $btn-success-bg;
  }
  
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(76,175,80, .5);
  }
  
  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &.is-round {
    @include border-radius(20px);
  }

  &.is-plain {
    color: $btn-plain-color;
    background: $btn-plain-bg;
    border: $border-width-default $border-style-default $border-color-base;

    &:hover,
    &:active {
      background-color: $btn-success-bg;
      text-decoration: none;
      color: $plain-color;
      border-color: $btn-success-bg;
      opacity: 0.5;
    }
  }

  &.is-long {
    @include size(100%, auto);
  }

  &.no-radius {
    @include border-radius(0);
  }
}

.g__btn--warning {
  @extend .g__btn--default;
  color: $btn-warning-color;
  background: $btn-warning-bg;
  border: $border-width-default $border-style-default $btn-warning-bg;

  &:hover,
  &:active {
    background-color: $btn-warning-bg;
    text-decoration: none;
    color: $plain-color;
    border-color: $btn-warning-bg;
  }
  
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(255,153,0, .5);
  }
  
  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &.is-round {
    @include border-radius(20px);
  }

  &.is-plain {
    color: $btn-plain-color;
    background: $btn-plain-bg;
    border: $border-width-default $border-style-default $border-color-base;

    &:hover,
    &:active {
      background-color: $btn-warning-bg;
      text-decoration: none;
      color: $plain-color;
      border-color: $btn-warning-bg;
      opacity: 0.5;
    }
  }

  &.is-long {
    @include size(100%, auto);
  }

  &.no-radius {
    @include border-radius(0);
  }
}

.g__btn--error {
  @extend .g__btn--default;
  color: $btn-error-color;
  background: $btn-error-bg;
  border: $border-width-default $border-style-default $btn-error-bg;

  &:hover,
  &:active {
    background-color: $btn-error-bg;
    text-decoration: none;
    color: $plain-color;
    border-color: $btn-error-bg;
  }
  
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(244,67,54, .5);
  }
  
  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &.is-round {
    @include border-radius(20px);
  }

  &.is-plain {
    color: $btn-plain-color;
    background: $btn-plain-bg;
    border: $border-width-default $border-style-default $border-color-base;

    &:hover,
    &:active {
      background-color: $btn-error-bg;
      text-decoration: none;
      color: $plain-color;
      border-color: $btn-error-bg;
      opacity: 0.5;
    }
  }

  &.is-long {
    @include size(100%, auto);
  }

  &.no-radius {
    @include border-radius(0);
  }
}

.g__btn--text {
  @extend .g__btn--default;
  color: $btn-text-color;
  background: $btn-text-bg;
  border: none;

  &:hover,
  &:active {
    background-color: $btn-text-bg;
    text-decoration: none;
    color: $text-color;
    border-color: $btn-text-bg;
  }

  &:focus {
    background-color: $btn-text-bg;
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &.is-long {
    @include size(100%, auto);
  }

  &.no-radius {
    @include border-radius(0);
  }
}

.g__btn--group {
  position: relative;
  vertical-align: middle;
  display: flex;

  & button {
    flex: 1;
    border-radius: 0;

    &.no-radius {
      @include border-radius(0);
    }
  }
  
  & button {
    &:focus {
      box-shadow: none;
    }
  }

  & button:first-child {
    @include border-radius();
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
  }

  & button:last-child {
    @include border-radius;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.g__hasIconBtn {
  padding: 11px 20px;
}
